<template>
  <div class="contacts">
    <!-- 顶部搜索栏 -->
    <div class="contacts-header">
      <div class="search-box">
        <input 
          type="text" 
          placeholder="搜索联系人" 
          v-model="searchText"
        />
      </div>
      <div class="add-contact" @click="showAddContact">
        <i class="icon-add-friend"></i>
      </div>
    </div>

    <!-- 联系人列表 -->
    <div class="contacts-list">
      <!-- 固定在顶部的功能项 -->
      <div class="fixed-items">
        <div class="contact-item" @click="navigateTo('/new-friends')">
          <div class="avatar special">
            <i class="icon-new-friend"></i>
          </div>
          <div class="info">
            <span>新的朋友</span>
          </div>
        </div>
        <div class="contact-item" @click="navigateTo('/groups')">
          <div class="avatar special">
            <i class="icon-group"></i>
          </div>
          <div class="info">
            <span>群聊</span>
          </div>
        </div>
      </div>

      <!-- 字母分组的联系人列表 -->
      <div 
        v-for="group in filteredContacts" 
        :key="group.letter"
        class="contact-group"
      >
        <div class="group-letter">{{ group.letter }}</div>
        <div 
          v-for="contact in group.contacts" 
          :key="contact.id"
          class="contact-item"
          @click="showContactDetail(contact)"
        >
          <img 
            :src="contact.avatar" 
            :alt="contact.name"
            class="avatar"
          />
          <div class="info">
            <span class="name">{{ contact.name }}</span>
            <span v-if="contact.remark" class="remark">{{ contact.remark }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧字母索引 -->
    <div 
      class="letter-index"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <span 
        v-for="letter in letters" 
        :key="letter"
        class="letter"
        :class="{ active: currentLetter === letter }"
      >
        {{ letter }}
      </span>
    </div>

    <!-- 中间显示当前选中字母 -->
    <div 
      v-if="showLetterHint"
      class="letter-hint"
    >
      {{ currentLetter }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchText = ref('')
const currentLetter = ref('')
const showLetterHint = ref(false)

// 字母表
const letters = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 
                'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 
                'X', 'Y', 'Z']

// 模拟联系人数据
const contacts = ref([
  {
    letter: 'A',
    contacts: [
      { id: 1, name: '阿黄', avatar: '/avatars/1.jpg' },
      { id: 2, name: '阿明', avatar: '/avatars/2.jpg', remark: '宠物医生' }
    ]
  },
  {
    letter: 'B',
    contacts: [
      { id: 3, name: '白白', avatar: '/avatars/3.jpg' }
    ]
  },
  // ... 更多联系人数据
])

// 过滤搜索结果
const filteredContacts = computed(() => {
  if (!searchText.value) return contacts.value
  
  return contacts.value.map(group => ({
    letter: group.letter,
    contacts: group.contacts.filter(contact => 
      contact.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
      (contact.remark && contact.remark.toLowerCase().includes(searchText.value.toLowerCase()))
    )
  })).filter(group => group.contacts.length > 0)
})

// 处理字母索引触摸事件
const onTouchStart = (e) => {
  e.preventDefault()
  handleTouchLetter(e)
  showLetterHint.value = true
}

const onTouchMove = (e) => {
  e.preventDefault()
  handleTouchLetter(e)
}

const onTouchEnd = () => {
  showLetterHint.value = false
}

const handleTouchLetter = (e) => {
  const touch = e.touches[0]
  const letterIndex = document.querySelector('.letter-index')
  const rect = letterIndex.getBoundingClientRect()
  const letterHeight = rect.height / letters.length
  const index = Math.floor((touch.clientY - rect.top) / letterHeight)
  
  if (index >= 0 && index < letters.length) {
    currentLetter.value = letters[index]
    scrollToLetter(letters[index])
  }
}

const scrollToLetter = (letter) => {
  const element = document.querySelector(`[data-letter="${letter}"]`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const showAddContact = () => {
  router.push('/add-contact')
}

const showContactDetail = (contact) => {
  router.push(`/contact/${contact.id}`)
}

const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.contacts {
  min-height: 100vh;
  background: var(--color-white);
  padding-top: 60px;
}

.contacts-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--color-primary);
  z-index: 100;
}

.search-box {
  flex: 1;
  margin-right: 16px;
}

.search-box input {
  width: 100%;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: none;
  background: var(--color-white);
  font-size: 14px;
}

.add-contact {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  cursor: pointer;
}

.contacts-list {
  padding-bottom: 20px;
}

.fixed-items {
  background: var(--color-white);
  border-bottom: 1px solid #eee;
}

.contact-group {
  padding-left: 16px;
}

.group-letter {
  padding: 8px 16px 8px 0;
  font-size: 14px;
  color: var(--color-gray);
  background: var(--color-secondary);
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
}

.avatar.special {
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.info {
  flex: 1;
}

.name {
  font-size: 16px;
}

.remark {
  font-size: 12px;
  color: var(--color-gray);
  margin-left: 8px;
}

.letter-index {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  background: rgba(0,0,0,0.1);
  border-radius: 20px;
  z-index: 99;
}

.letter {
  font-size: 12px;
  padding: 2px 4px;
  color: var(--color-gray);
}

.letter.active {
  color: var(--color-accent);
  font-weight: bold;
}

.letter-hint {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(0,0,0,0.7);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border-radius: 8px;
}
</style> 